// 测试文字渐变转换修复
// 由于 TypeScript 文件需要编译，我们先使用现有的测试文件来验证逻辑

console.log('=== 文字渐变转换问题分析 ===\n');

// 问题1：复杂角度渐变转换问题
console.log('📝 问题1：复杂角度 143.77deg 转换问题');
console.log('原始 CSS: linear-gradient(143.77deg, #B2EBF2 2.52%, #D1C4E9 60.48%, #F8BBD0 91.22%)');
console.log('错误转换: bg-gradient-to-[143.77deg] from-[#B2EBF2] via-[#D1C4E9] to-[#F8BBD0]');
console.log('问题: 角度被错误地包装在 to-[143.77deg] 中，导致转换回 CSS 时格式错误');
console.log('修复方案: 对于非标准角度，使用完整的 bg-[linear-gradient(...)] 格式\n');

// 问题2：文本渐变属性转换问题
console.log('📝 问题2：文本渐变属性转换问题');
console.log('原始 CSS: -webkit-background-clip: text; -webkit-text-fill-color: transparent;');
console.log('错误转换: bg-clip-text text-transparent');
console.log('问题: WebKit 前缀属性没有正确转换');
console.log('修复方案: 使用 [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] 格式\n');

// 问题3：backgroundImage vs background 属性处理
console.log('📝 问题3：backgroundImage vs background 属性处理');
console.log('原始 CSS: background-image: linear-gradient(90deg, ...)');
console.log('问题: backgroundImage 和 background 属性的处理逻辑不一致');
console.log('修复方案: 统一使用 background 属性处理渐变\n');

console.log('=== 修复后的预期效果 ===\n');

console.log('✅ 修复1：复杂角度渐变');
console.log('输入: linear-gradient(143.77deg, #B2EBF2, #D1C4E9, #F8BBD0)');
console.log('输出: bg-[linear-gradient(143.77deg, #B2EBF2, #D1C4E9, #F8BBD0)]');
console.log('转换回: background: linear-gradient(143.77deg, #B2EBF2, #D1C4E9, #F8BBD0);\n');

console.log('✅ 修复2：文本渐变属性');
console.log('输入: WebkitBackgroundClip: text, WebkitTextFillColor: transparent');
console.log('输出: [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent]');
console.log('转换回: -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n');

console.log('✅ 修复3：完整的文本渐变');
console.log('输入: background + backgroundClip + WebkitTextFillColor');
console.log(
  '输出: bg-[linear-gradient(...)] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text]',
);
console.log('转换回: 完整的文本渐变样式\n');

console.log('=== 文字渐变转换修复测试 ===\n');

// 测试案例1：第一个示例问题
console.log('📝 测试案例1：复杂角度文字渐变');
const style1 = {
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  lineHeight: 'initial',
  fontSize: '74px',
  color: 'rgb(29, 29, 31)',
  fontWeight: '900',
  background: 'linear-gradient(143.77deg, #B2EBF2 2.52%, #D1C4E9 60.48%, #F8BBD0 91.22%)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  backgroundClip: 'text',
};

console.log('原始样式:', JSON.stringify(style1, null, 2));

const tailwindClasses1 = EnhancedStyleTransformer.toStyle(style1);
console.log('转换为 Tailwind 类名:', tailwindClasses1);

const backToStyle1 = EnhancedStyleTransformer.toInlineStyle(tailwindClasses1.split(' '));
console.log('转换回内联样式:', JSON.stringify(backToStyle1.style, null, 2));

console.log('\n' + '='.repeat(60) + '\n');

// 测试案例2：第二个示例问题
console.log('📝 测试案例2：标准角度文字渐变');
const style2 = {
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  lineHeight: 'initial',
  backgroundImage: 'linear-gradient(90deg, rgb(205, 205, 253) 0%, rgb(101, 150, 255) 100%)',
  backgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  fontSize: '59px',
  color: 'rgb(29, 29, 31)',
  fontWeight: '700',
};

console.log('原始样式:', JSON.stringify(style2, null, 2));

const tailwindClasses2 = EnhancedStyleTransformer.toStyle(style2);
console.log('转换为 Tailwind 类名:', tailwindClasses2);

const backToStyle2 = EnhancedStyleTransformer.toInlineStyle(tailwindClasses2.split(' '));
console.log('转换回内联样式:', JSON.stringify(backToStyle2.style, null, 2));

console.log('\n' + '='.repeat(60) + '\n');

// 测试案例3：简单的文字渐变
console.log('📝 测试案例3：简单文字渐变');
const style3 = {
  background: 'linear-gradient(90deg, #ff0000, #00ff00)',
  backgroundClip: 'text',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  color: 'transparent',
};

console.log('原始样式:', JSON.stringify(style3, null, 2));

const tailwindClasses3 = EnhancedStyleTransformer.toStyle(style3);
console.log('转换为 Tailwind 类名:', tailwindClasses3);

const backToStyle3 = EnhancedStyleTransformer.toInlineStyle(tailwindClasses3.split(' '));
console.log('转换回内联样式:', JSON.stringify(backToStyle3.style, null, 2));

console.log('\n' + '='.repeat(60) + '\n');

// 测试案例4：测试特定的类名组合
console.log('📝 测试案例4：特定类名组合测试');
const testClasses = [
  'overflow-hidden',
  '[textOverflow:ellipsis]',
  '[whiteSpace:nowrap]',
  '[lineHeight:initial]',
  'bg-[linear-gradient(143.77deg, #B2EBF2 2.52%, #D1C4E9 60.48%, #F8BBD0 91.22%)]',
  '[WebkitBackgroundClip:text]',
  '[WebkitTextFillColor:transparent]',
  '[backgroundClip:text]',
  'text-[74px]',
  'text-[rgb(29, 29, 31)]',
  'font-black',
];

console.log('测试类名:', testClasses.join(' '));

const testResult = EnhancedStyleTransformer.toInlineStyle(testClasses);
console.log('转换结果:', JSON.stringify(testResult.style, null, 2));
console.log('已转换类名:', testResult.convertedClasses);
console.log('未转换类名:', testResult.unconvertedClasses);

console.log('\n✅ 测试完成');
